<div class="wdl-container" [class.wdl-is-mobile]="mobileQuery.matches">
 <mat-toolbar color="primary" class="wdl-toolbar">
  <mat-toolbar-row style="background-image: url(../../assets/images/title_bar_background.JPG);">
    <button class="wdl" mat-button (click)="sidenav.toggle()">
      <mat-icon svgIcon="menu" style="color: white;"></mat-icon>
    </button>
    <img src="../../assets/images/logo.png" height="33px" width="30px" style="margin-left: -10px;margin-right: 10px;">
    <span>{{((institution && institution.instName) ? institution.instName : '') + ('systemSuffix' | translate)}}</span>
    <span class="header-spacer"></span>
    <mat-icon [svgIcon]="isAdminUser() ? 'admin' : 'user'" style="color: white;margin-top: -15px;"></mat-icon>
    <button mat-button class="quit-btn" (click)="openUserInfo()">{{user.name}}</button>
    <button mat-button class="quit-btn" (click)="logout($event)">{{"quit" | translate}}</button>
  </mat-toolbar-row>
 </mat-toolbar>

 <mat-sidenav-container class="wdl-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
  <mat-sidenav #sidenav class="wdl-sidenav"
   [mode]="mobileQuery.matches ? 'over' : 'side'"
   [opened]="mobileQuery.matches ? false : true"
   [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
    <mat-nav-list>
      <mat-list-item *ngIf="isUserQalified('mcenter')" (click)="navigateTo('mcenter')" [ngClass]="{'item-active': currentApp === 'mcenter'}">
        <mat-icon svgIcon="center" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"monitorCenter" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('monitor')" (click)="navigateTo('monitor')" [ngClass]="{'item-active': currentApp === 'monitor'}">
        <mat-icon svgIcon="monitor" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"realtimeMonitor" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('map')" (click)="navigateTo('map')" [ngClass]="{'item-active': currentApp === 'map'}">
        <mat-icon svgIcon="position" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"mapMonitor" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('person')" (click)="navigateTo('person')" [ngClass]="{'item-active': currentApp === 'person'}">
        <mat-icon svgIcon="person" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"pInfoMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('device')" (click)="navigateTo('device')" [ngClass]="{'item-active': currentApp === 'device'}">
        <mat-icon svgIcon="device" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"deviceMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('alarm')" (click)="navigateTo('alarm')" [ngClass]="{'item-active': currentApp === 'alarm'}">
        <mat-icon svgIcon="alarm" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"alarmMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('nurse')" (click)="navigateTo('nurse')" [ngClass]="{'item-active': currentApp === 'nurse'}">
        <mat-icon svgIcon="nurse" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"nInfoMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('bed')" (click)="navigateTo('bed')" [ngClass]="{'item-active': currentApp === 'bed'}">
        <mat-icon svgIcon="bed" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"bedMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('department')" (click)="navigateTo('department')" [ngClass]="{'item-active': currentApp === 'department'}">
        <mat-icon svgIcon="department" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"departmentMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('institution')" (click)="navigateTo('institution')" [ngClass]="{'item-active': currentApp === 'institution'}">
        <mat-icon svgIcon="domain" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"institutionMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('user')" (click)="navigateTo('user')" [ngClass]="{'item-active': currentApp === 'user'}">
        <mat-icon svgIcon="users" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"userMgt" | translate}}</h6>
      </mat-list-item>
      <mat-list-item *ngIf="isUserQalified('menu')" (click)="navigateTo('menu')" [ngClass]="{'item-active': currentApp === 'menu'}">
        <mat-icon svgIcon="rights" style="margin:-10px 10px 0 -10px;"></mat-icon>
        <h6>{{"menuMgt" | translate}}</h6>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <div [class.wdl-sidenav-content]="!mobileQuery.matches">
    <router-outlet></router-outlet>
  </div>
 </mat-sidenav-container>
</div>
